<template>
  <div class="text-white content w-full">
    <div class="searchBox">
      <el-select v-model="searchFWZXID" @change="GetFWZList">
        <el-option
          v-for="item in searchInfoFWZX"
          :key="item.ID"
          :label="item.name"
          :value="item.ID"
        >
        </el-option>
      </el-select>
      <el-select v-model="searchFWZID" @change="ChangeFWZ">
        <el-option
          v-for="item in searchInfoFWZ"
          :key="item.ID"
          :label="item.name"
          :value="item.ID"
        >
        </el-option>
      </el-select>
    </div>

    <BorderBox1 class="bg-gray-800 py-1 w-full h-full">
      <div class="grid grid-rows-5 h-full gap-2">
        <div
          class="top grid row-span-3 grid-cols-4 gap-2 h-full overflow-y-auto"
        >
          <div class="left grid col-span-1 pt-6 pl-6">
            <MemberData :data="data"></MemberData>
            <div class="mt-2">
              <percent
                :isShowBar="isShowBar"
                :LeftBarData="LeftBarData"
                :RightBarData="RightBarData"
              ></percent>
            </div>
          </div>
          <div class="middle grid grid-rows-5 col-span-2">
            <MainTitle></MainTitle>
            <div class="w-full row-span-4">
              <DailyAdd
                :isShow="isShow"
                :line="line"
                :registrants_rank="registrants_rank"
              ></DailyAdd>
            </div>
          </div>
          <div class="right col-span-1 pt-6 pr-6">
            <process
              :isShowLine="isShowLine"
              :plan_histogram="plan_histogram"
              :plan_rank="plan_rank"
            ></process>
          </div>
        </div>
        <div class="bottom grid row-span-2 grid-cols-4 gap-2 h-full">
          <div class="left col-span-1 pl-6 pb-4">
            <Top :illList="illList"></Top>
          </div>
          <div class="left col-span-1 pb-4" style="padding-left: 0">
            <BZLineBox
              :BZlineData="BZlineData"
              :isShowBZLine="isShowBZLine"
            ></BZLineBox>
          </div>
          <div class="middle col-span-1 pb-4">
            <UsePercent
              :isShowPie="isShowPie"
              :hierarchy_pie="hierarchy_pie"
            ></UsePercent>
          </div>
          <div class="col-span-1 pb-4 pr-6">
            <Today
              :service_histogram="service_histogram"
              :isShowHistogram="isShowHistogram"
            ></Today>
          </div>
        </div>
      </div>
    </BorderBox1>
  </div>
</template>

<script setup>
import { BorderBox1 } from '@kjgl77/datav-vue3'
import { ref } from 'vue'
import { getAllUserData,getUser } from '@/api/memberManager'
import MemberData from '@/view/allUser/model/memberData.vue'
import DailyAdd from '@/view/allUser/model/dailyAdd.vue'
import percent from '@/view/allUser/model/percent.vue'
import Process from '@/view/allUser/model/process.vue'
import Top from '@/view/allUser/model/top10.vue'
import Today from '@/view/allUser/model/today.vue'
import BZLineBox from '@/view/allUser/model/BZLine.vue'
import UsePercent from '@/view/allUser/model/usePercent.vue'
import MainTitle from '@/view/allUser/components/mainTitle.vue'
import {
  getServiceCenterList,
  getHealthManageCenterList
} from '@/api/fdHealthManager'
const data = ref({})
const LeftBarData = ref([])
const RightBarData = ref([])
const illList = ref([])
const line = ref({})
const isShow = ref(false)
const isShowPie = ref(false)
const isShowHistogram = ref(false)
const isShowLine = ref(false)
const isShowBar = ref(false)
const isShowBZLine = ref(false)
const registrants_rank = ref([])
const hierarchy_pie = ref([])
const plan_histogram = ref({})
const plan_rank = ref([])
const service_histogram = ref({})
const BZlineData = ref({})
const searchFWZXID = ref('')
const searchFWZID = ref('')
const searchInfoFWZX = ref([
  { value: '1', label: '全部' },
  { value: '2', label: '服务中心1' },
  { value: '3', label: '服务中心2' }
])
const searchInfoFWZ = ref([
  { value: '11', label: '全部' },
  { value: '21', label: '服务站1' },
  { value: '31', label: '服务站2' }
])
const getOneOptions = async () => {
  const resOne = await getServiceCenterList()
  if (resOne.code === 0) {
    console.log(resOne.data)
    searchInfoFWZX.value = resOne.data
    var arr = searchInfoFWZX.value
    arr.splice(0, 0, {
      ID: '0',
      name: '全部'
    })
    searchInfoFWZX.value = arr
  }
}

getOneOptions()
const GetFWZList = async (ID) => {
  const resTwo = await getHealthManageCenterList({ ID: ID })
  console.log(resTwo)
  if (resTwo.code === 0) {
    searchInfoFWZ.value = resTwo.data
    var arr = searchInfoFWZ.value
    arr.splice(0, 0, {
      ID: '0',
      name: '全部'
    })
    searchInfoFWZ.value = arr
  }
}
const ChangeFWZX = async () => {
  console.log(searchFWZXID.value)
  getHealthManageCenterList({ ID: searchFWZXID.value })
}
const ChangeFWZ = async () => {
  console.log(searchFWZID.value)
  if (searchFWZID.value === '0') {
    searchFWZXID.value = '0'
    initPage()
  } else {
      initPageOne()
  }
}
const initPage = async () => {
  const res = await getAllUserData()
  data.value = res.data
  LeftBarData.value = data.value.age_pie
  RightBarData.value = data.value.sex_pie
  data.value.disease_rank.sort((a, b) => b.count - a.count)
  illList.value = data.value.disease_rank
  illList.value.forEach((item, index) => {
    // 获取illList每一项count的总和
    const sum = illList.value.reduce((prev, cur) => {
      return prev + cur.count
    }, 0)

    // 计算每一项count的百分比
    item.percent = ((item.count / sum) * 100).toFixed(2) + '%'
    if (item.count.toString().length > 4) {
      var countWan = item.count.toString()
      countWan = countWan.substring(0, countWan.length - 4) + '万'

      item.count = countWan
    }
  })
  line.value = data.value.add_line
  if (line.value) {
    isShow.value = true
  }
  registrants_rank.value = data.value.registrants_rank
  hierarchy_pie.value = data.value.hierarchy_pie
  if (hierarchy_pie.value) {
    isShowPie.value = true
  }
  plan_histogram.value = data.value.plan_histogram
  if (plan_histogram.value) {
    isShowLine.value = true
  }
  plan_rank.value = data.value.plan_rank
  // BZlineData.value ={num100: 130,num80:130,num60: 20,num40:130,num20: 0,num0: 110}
  BZlineData.value = data.value.fanganpercent
  if (BZlineData.value) {
    isShowBZLine.value = true
  }
  service_histogram.value = data.value.service_histogram
  if (service_histogram.value) {
    isShowHistogram.value = true
  }

  if (LeftBarData.value?.length && RightBarData.value?.length) {
    isShowBar.value = true
  }
}
const initPageOne = async () => {
  const res = await getUser({id: searchFWZID.value})
  data.value = res.data
  LeftBarData.value = data.value.age_pie
  RightBarData.value = data.value.sex_pie
  data.value.disease_rank.sort((a, b) => b.count - a.count)
  illList.value = data.value.disease_rank
  illList.value.forEach((item, index) => {
    // 获取illList每一项count的总和
    const sum = illList.value.reduce((prev, cur) => {
      return prev + cur.count
    }, 0)

    // 计算每一项count的百分比
    item.percent = ((item.count / sum) * 100).toFixed(2) + '%'
    if (item.count.toString().length > 4) {
      var countWan = item.count.toString()
      countWan = countWan.substring(0, countWan.length - 4) + '万'

      item.count = countWan
    }
  })
  line.value = data.value.add_line
  if (line.value) {
    isShow.value = true
  }
  registrants_rank.value = data.value.registrants_rank
  hierarchy_pie.value = data.value.hierarchy_pie
  if (hierarchy_pie.value) {
    isShowPie.value = true
  }
  plan_histogram.value = data.value.plan_histogram
  if (plan_histogram.value) {
    isShowLine.value = true
  }
  plan_rank.value = data.value.plan_rank
  // BZlineData.value ={num100: 130,num80:130,num60: 20,num40:130,num20: 0,num0: 110}
  BZlineData.value = data.value.fanganpercent
  if (BZlineData.value) {
    isShowBZLine.value = true
  }
  service_histogram.value = data.value.service_histogram
  if (service_histogram.value) {
    isShowHistogram.value = true
  }

  if (LeftBarData.value?.length && RightBarData.value?.length) {
    isShowBar.value = true
  }
}
initPage()
</script>

<style lang="scss" scoped>
.content {
  height: calc(100vh - 130px);
}
.searchBox {
  width: 50%;
  display: flex;
  justify-content: flex-start;
  margin-top: 3vh;
}
.searchBox .el-select {
  margin-right: 5%;
}
</style>
